<template>
 <div class="add_item">
	 	<el-tabs v-if="!edition" v-model="activeName" @tab-click="handleClick">
	    <el-tab-pane label="手动录入" name="first">
	    	<router-view v-if="activeName === 'first'"></router-view>
	    </el-tab-pane>
	    <el-tab-pane label="批量录入"  name="second">
	    	<div class="save-excle" v-if="activeName === 'second'">
	    		<div class="excle-item">
	    			<img src="../../../assets/images/batch-add-excel.png" alt="" />
	    			<div class="excle_btn">
	    				<a href="https://kaoshixing.oss-cn-beijing.aliyuncs.com/exam_teamplate_test.xls" target="_self" class="el-button el-button--primary">下载模板</a>
	    				<el-upload
						  class="upload-demo"
						  action="https://jsonplaceholder.typicode.com/posts/"
						  :on-change="handleChange"
						  :file-list="fileList3"
						  :show-file-list="false"
						  :http-request="uploadRequest"
						  >
						  <el-button type="primary">上传excle</el-button>
						</el-upload>
	    			</div>
	    		</div>
				<el-dialog
				  title="试卷生成"
				  :visible.sync="addPageVisible"
				  width="400px"
				  :before-close="handleClose">
				  <p>请输入试卷名称:</p>
				  <p><el-input v-model="pageName" placeholder="请输入"></el-input></p>
				  <p>请选择试卷类型:</p>
				  <p>
				  	<el-input
		      			class="inline-input"
				        v-model="checkTestClassify"
				        placeholder="请添加试卷分类"
				    >
				    </el-input>
				  </p>
				  <span slot="footer" class="dialog-footer">
				    <el-button @click="addPageVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addpageIn">确 定</el-button>
				  </span>
				</el-dialog>
	    	</div>
	    </el-tab-pane>
	  </el-tabs>
	  <router-view v-if="edition"></router-view>
 </div>
</template>

<script>
    import { questionMultiAdd,Login} from '@/assets/util/api.js'
  export default {
    data() {
      return {
      	activeName:"first",
      	edition:false,
      	access_token:"",
      	addPageVisible:false,
      	formDate:"",
      	pageName:"",//试卷名称
      	checkTestClassify:"",//试卷分类
      };
    },
    mounted(){
      this.access_token = this.inStorage("get","access_token");
    },
    watch:{
    	'$route' (to, from) {
    		if(this.$route.query.type){
    			this.edition = true;
    		}else{
    			this.edition = false
    		}
    	},
    },
    components:{
    	editor:(resolve)=>require(["@/components/testQuestion/addItemBank/plugin/Edition"], resolve),
    },
    methods: {
     handleClick(e){
		if(this.activeName === 'first'){
//			this.RouterTo(this,"/itemBank/addItemBank/addTestQm")
		}else if(this.activeName === 'second'){
			
		}
     },
     uploadRequest(res){
     	var _this = this;
     	this.formDate = new FormData();  
		this.formDate.append("access_token", this.access_token);
		console.log("上传excle的数据",res);
		this.formDate.append("excel",res.file);
		this.$confirm('请问您是否直接生成试卷?', '提示', {
          confirmButtonText: '不直接生成',
          cancelButtonText: '生成',
          type: 'warning'
        }).then(() => {
        	this.questionMultiAdd();
        }).catch(() => {
          this.addPageVisible = true;         
        });
		
//		this.addPageVisible = true;
//		formDate.append("name","name")
//		formDate.append("subject","subject")
     },
     querySearch(queryString, cb) {
        var restaurants = this.restaurants;
		var _this = this;
        var params = {
        	access_token:this.access_token
        }
        var arr = [];
        questionGetType(this,params).then((res)=>{
        	arr = res.data.data;
        	var result = queryString ? arr.filter(_this.createFilter(queryString)) : arr;
        	cb(result);
        })
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.checkTestClassify = item;
      },
      addpageIn(){
      	this.formDate.append("name",this.pageName);
      	this.formDate.append("subject",this.checkTestClassify);
      	this.questionMultiAdd();
      },
      questionMultiAdd(){
      	var _this = this;
      	questionMultiAdd(this,this.formDate).then((res)=>{
      		console.log(res)
      		if(res.data.state){
      			_this.$message.success("上传成功！");
      		}
      		if(res.data.code){
				_this.$message.error(_this.publicMsg(res.data.code),res.data.message);
			}
      	});
      	this.addPageVisible = false;
      }
    }
  }
 
</script>
<style lang="scss">
  .add_item{
  	.el-tabs__nav{
  		width: 100%;
  		.el-tabs__item{
  			text-align: center;
  			width: 50%;
  		}
  	}
  	.save-excle{
  		margin-top: 200px;
  		display: flex;
  		justify-content: center;
  		align-items: center;
		.excle-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.excle_btn{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 40px;
				box-sizing: border-box;
			}
		}
  	}
  }
</style>

